<template>
    <div class="proparams">
        <!--这是一组参数 phisicalparams-->
        <div v-for="(item,index) in groups" :key="item.name" class="paramsGroup" style="position: relative;">
            <!--根据接口返回的接口来判断 比如有几个参数我就有几个div div里面的数据再次循环  只是当前的active都不一样  对应的文本框的值也不一样 判断如果是最后一项还要显示删除按钮，把当前这个参数从该参数组移除-->
            <span style="color: #20a0ff;">参数组名称：</span>
            <span v-text="item.name"></span>

            <div v-for="(item1,index) in item.parametersList"
                 :key="item1.id">
                <span v-text="item1.parameterName"></span>
                <el-input style="width: 300px" v-model="item1.parameterValue"></el-input>
                <!--<el-button type="primary" icon="delete"-->
                <!--@click="removeItem(index,item1.id)"></el-button>-->

            </div>
            <el-button type="primary" icon="delete" style="position:absolute;
    top: 10px;right: 10px;" @click="remove(index,item.id)"></el-button>
        </div>

        <h3 class="addgroupparams">+添加参数组</h3>
        <el-form :model="paramsData" class="demo-dynamic" ref="paramsData" label-width="100px">
            <el-form-item
                    prop="name"
                    label="参数组名称">
                <el-input v-model="paramsData.name" style="width: 260px;"></el-input>
            </el-form-item>
            <el-form-item
                    v-for="(item, index) in paramsData.parametersList"
                    :key="item.parametersPoolId" style="margin-bottom: 24px">

                <el-select v-model="item.parametersPoolId" placeholder="请选择">
                    <el-option
                            v-for="a in phisicalparams"
                            :key="a.id"
                            :label="a.name"
                            :value="a.id">
                    </el-option>
                </el-select>
                <el-input v-model="item.parameterValue" style="width: 240px;"></el-input>
                <el-button @click.prevent="removeDomain(item)">删除</el-button>
                <!--<span v-if="isEmpty" style="color: red;">请至少输入一条参数信息</span>-->
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('paramsData')">提交</el-button>
                <el-button @click="addParams">新增参数</el-button>
                <!--<el-button @click="resetForm('paramsData')">重置</el-button>-->
            </el-form-item>

        </el-form>
        <div class="editBtn">
            <el-button @click="goNext('pro-intro')">上一步</el-button>
            <el-button @click="goNext('pro-speci')">下一步</el-button>
        </div>
    </div>
</template>
<script>
    import {setItem, getItem, remoteItem, setParamDEL,getParamDEL} from '@/utils/params';
    import {getSelectedParams} from '@/api/normalPublish';
    import {stripscript} from '@/utils/validate';

    export default {
        props: {
            'categoryName': {
                type: Object,
                default: () => {
                    return {}
                }
            },
            'isEdit': {
                type: Boolean,
                default: false
            },
            'info': {
                type: Object,
                default: () => {
                    return {}
                }
            }

        },
        data() {
            return {
                paramsData: {
                    name: '',
                    parametersList: [
                        {
                            "parameterValue": "",
                            'parametersPoolId': '',
                            "parameterName": ''
                        }
                    ]
                },
                activeparams1: 1,
                activeparams2: 1,
                phisicalparams: [
//                    {
//                        id: 0,
//                        name: "屏幕大小"
//                    },
//                    {
//                        id: 1,
//                        name: "CPU"
//                    },
//                    {
//                        id: 2,
//                        name: "内存容量"
//                    }
                ],
                groups: [
//                    {
//                        "name": "测试参数组1",
//                        "parametersList": [
//                            {
//                                "parameterName": "ceshu2",
//                                "parameterValue": "111",
//                            }
//                        ]
//                    }
                ],
                deleteIds: [],
                isEmpty: false
            }
        },
        mounted() {
            if (this.isEdit) {
//                编辑
                this.renderData();
                setTimeout(this.getParamsLists(this.info.goods.typeId), 20)
            } else {
                this.groups = getItem();
//                缓存typeID
                if(this.categoryName.typeId){
                    sessionStorage.setItem('TYPE_ID',this.categoryName.typeId);
                }
                setTimeout(this.getParamsLists(sessionStorage.getItem('TYPE_ID')), 20)
            }
        },
        methods: {
            backToPublish() {
                this.$confirm('此操作将丢失编辑的数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    clearSession();
                    this.isEdit = false;
                    this.$router.push({path: '/goods/publish'})
                }).catch(() => {

                });

            },
            getParamsLists(id) {
                getSelectedParams(id)
                    .then((resp) => {
//                        console.log(resp);
                        if (resp.data.length != 0) {
                            for (let item of resp.data) {
                                let data = {
                                    id: item.id,
                                    name: item.parameterName
                                };
                                this.phisicalparams.push(data)
                            }
                        }

                    })
                    .catch((err) => {
//                        console.log(err)
                    })
            },
            remove(index, id) {
                if (this.isEdit) {
                    this.deleteIds.push({"id":id});
                   if(this.deleteIds.length){
//                       sessionStorage.setItem('delParamsIds', JSON.stringify(this.deleteIds));
                       setParamDEL(this.deleteIds)
                   }

                }
                //  删除新增的参数组
                remoteItem(index);

                this.groups = getItem()

            },
            submitForm(formName) {
                let isChecked = false;
                if (this.paramsData.name == "") {
                    this.$message({
                        message: '请填写商品参数',
                        type: 'warning'
                    });
                    return
                }
                if (!stripscript(this.paramsData.name)) {
                    this.$message({
                        message: '包换特殊字符！',
                        type: 'warning'
                    });
                    return
                }
//                新增一组参数
                let addCat = {
                    "name": this.paramsData.name,
                    "parametersList": []
                };

                for (let item of this.paramsData.parametersList) {
                    let data = {
                        "parametersPoolId": item.parametersPoolId,
                        "parameterValue": item.parameterValue,
                        "parameterName": ''
                    };

                    for (let item of this.phisicalparams) {
                        if (data.parametersPoolId == item.id) {
                            data.parameterName = item.name
                        }
                    }

                    if (data.parameterValue == '') {
                        this.$message({
                            message: '请至少填写添加一组参数',
                            type: 'warning'
                        });
                        return
                    }
                    if (data.parametersPoolId == '') {
                        this.$message({
                            message: '请先选择参数',
                            type: 'warning'
                        });
                        return
                    }
                    addCat.parametersList.push(data);
                }
                this.groups.push(addCat);
//                console.log(this.groups);
                setItem(this.groups);
                this.paramsData = {
                    name: '',
                    parametersList: [
                        {
                            "parameterValue": "",
                            'parametersPoolId': '',
                            "parameterName": ''
                        }
                    ]
                }
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            removeItem(index, id) {
//删除单个参数

            },
            removeDomain(item) {
                var index = this.paramsData.parametersList.indexOf(item);
                if (index !== -1) {
                    this.paramsData.parametersList.splice(index, 1)
                }

            },
            addParams() {
                this.paramsData.parametersList.push(
                    {
                        "parameterValue": "",
                        'parametersPoolId': ''
                    }
                );
            },
            save()
            {
                if (this.groups.length == 0) {
                    this.$message.error('请添加商品参数');
                }
                setItem(this.groups);
                if (this.isEdit) {
                    if(this.deleteIds.length){
//                        sessionStorage.setItem('delParamsIds', JSON.stringify(this.deleteIds));
                        setParamDEL(this.deleteIds);
                    }
                }
            },
            goNext(stepName) {
                this.save();
                this.$emit('nextprew', stepName);
            },
            renderData() {
//                {
//                        "name": "测试参数组1",
//                        "parametersList": [
//                            {
//                                "parameterName": "ceshu2",
//                                "parameterValue": "111",
//                            }
//                        ]
//                    }
//                一开始渲染的参数组
                for (let item of this.info.parametersGroupBeanList) {
                    let data = {
                        id: item.id,
                        name: item.name,
                        parametersList: []
                    };
                    for (let item1 of item.parametersList) {
                        let list = {
                            parametersPoolId: item1.parametersPoolId,
                            "parameterName": item1.parameterName,
                            "parameterValue": item1.parameterValue,
                            "id": item1.id
                        };
                        data.parametersList.push(list)
                    }
                    this.groups.push(data)
                }

                setItem(this.groups);
            },

        }
    }
</script>

<style lang="less">
    .proparams {
        .paramsGroup {
            border: 1px solid #ccc;
            width: 660px;
            margin-bottom: 24px;
            padding: 24px;
            min-height: 180px;
            span {
                display: inline-block;
                width: 200px;
                line-height: 24px;
            }
        }
        .addParamGroup {
            height: 250px;

        }
        .editBtn {
            display: block;
            text-align: center;
            margin-top: 24px;

        }
    }
</style>
